<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid editor-with-preview" [class.show-preview]="showItemPreview">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output [docUrl]="docUrl" [editorService]="editorService" (executeQuery)="save($event)" />
      </div>
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="content-block">
          <span class="category-title" [translate]="'CREATURE.TEMPLATE.BASE'"></span>
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="entry">entry</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'UNIQUE_ID' | translate: { ENTITY: 'creature' }"></i>
              <input [formControlName]="'entry'" id="entry" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="name">name</label>
              <input [formControlName]="'name'" id="name" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="subname">subname</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SUBNAME' | translate"></i>
              <input [formControlName]="'subname'" id="subname" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="IconName">
                <keira-icon-selector
                  [src]="'assets/img/creature-icons/' + editorService.form.controls.IconName.value + '.png'"
                ></keira-icon-selector>
                IconName</label
              >
              <keira-generic-option-selector
                [control]="editorService.form.controls.IconName"
                id="IconName"
                [optionList]="CREATURE_ICON"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="minlevel">minlevel</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MIN_MAX_LEVEL' | translate"></i>
              <input [formControlName]="'minlevel'" id="minlevel" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="maxlevel">maxlevel</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MIN_MAX_LEVEL' | translate"></i>
              <input [formControlName]="'maxlevel'" id="maxlevel" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="exp">expansion</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.exp"
                id="exp"
                [optionList]="EXPANSION"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="faction">faction</label>
              <keira-faction-selector-btn
                [config]="{ name: 'faction' }"
                [control]="editorService.form.controls.faction"
                [disabled]="editorService.form.controls.faction.disabled"
              />
              <input [formControlName]="'faction'" id="faction" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="npcflag">npcflag</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.npcflag"
                [disabled]="editorService.form.controls.npcflag.disabled"
                [config]="{ flags: NPC_FLAGS, name: 'npcflag' }"
              />
              <input [formControlName]="'npcflag'" id="npcflag" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="rank">rank</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.RANK' | translate"></i>
              <keira-generic-option-selector
                [control]="editorService.form.controls.rank"
                id="rank"
                [optionList]="RANK"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="family">family</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.family"
                id="family"
                [optionList]="CREATURE_FAMILY"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="type">type</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.type"
                id="type"
                [optionList]="CREATURE_TYPE"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="type_flags">type_flags</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.type_flags"
                [disabled]="editorService.form.controls.type_flags.disabled"
                [config]="{ flags: CREATURE_TYPE_FLAGS, name: 'type_flags' }"
              />
              <input [formControlName]="'type_flags'" id="type_flags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="unit_class">unit_class</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.unit_class"
                id="unit_class"
                [optionList]="UNIT_CLASS"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="unit_flags">unit_flags</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.unit_flags"
                [disabled]="editorService.form.controls.unit_flags.disabled"
                [config]="{ flags: UNIT_FLAGS, name: 'unit_flags' }"
              />
              <input [formControlName]="'unit_flags'" id="unit_flags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="unit_flags2">unit_flags2</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.unit_flags2"
                [disabled]="editorService.form.controls.unit_flags2.disabled"
                [config]="{ flags: UNIT_FLAGS_2, name: 'unit_flags2' }"
              />
              <input [formControlName]="'unit_flags2'" id="unit_flags2" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="dynamicflags">dynamicflags</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.dynamicflags"
                [disabled]="editorService.form.controls.dynamicflags.disabled"
                [config]="{ flags: DYNAMIC_FLAGS, name: 'dynamicflags' }"
              />
              <input [formControlName]="'dynamicflags'" id="dynamicflags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="RegenHealth">RegenHealth</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.REGEN_HEALTH' | translate"></i>
              <keira-boolean-option-selector
                [control]="editorService.form.controls.RegenHealth"
                id="RegenHealth"
              ></keira-boolean-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="mechanic_immune_mask">mechanic_I_M</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.mechanic_immune_mask"
                [disabled]="editorService.form.controls.mechanic_immune_mask.disabled"
                [config]="{ flags: MECHANIC_IMMUNE_MASK, name: 'mechanic_immune_mask' }"
              />
              <input
                [formControlName]="'mechanic_immune_mask'"
                id="mechanic_immune_mask"
                type="number"
                class="form-control form-control-sm"
              />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="spell_school_immune_mask">spell_school_I_M</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.spell_school_immune_mask"
                [disabled]="editorService.form.controls.spell_school_immune_mask.disabled"
                [config]="{ flags: SPELL_SCHOOL_IMMUNE_MASK, name: 'spell_school_immune_mask' }"
              />
              <input
                [formControlName]="'spell_school_immune_mask'"
                id="spell_school_immune_mask"
                type="number"
                class="form-control form-control-sm"
              />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="flags_extra">flags_extra</label>
              <keira-flags-selector-btn
                [control]="editorService.form.controls.flags_extra"
                [disabled]="editorService.form.controls.flags_extra.disabled"
                [config]="{ flags: FLAGS_EXTRA, name: 'flags_extra' }"
              />
              <input [formControlName]="'flags_extra'" id="flags_extra" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="VehicleId">VehicleId</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.VEHICLE_ID_TOOLTIP' | translate"></i>
              <input [formControlName]="'VehicleId'" id="VehicleId" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="RacialLeader">RacialLeader</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.RACIAL_LEADER' | translate"></i>
              <keira-boolean-option-selector
                [control]="editorService.form.controls.RacialLeader"
                id="RacialLeader"
              ></keira-boolean-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="PetSpellDataId">PetSpellDataId</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.PET_SPELL_DATA_ID' | translate"></i>
              <input [formControlName]="'PetSpellDataId'" id="PetSpellDataId" type="number" class="form-control form-control-sm" />
            </div>
          </div>
        </div>
        <div class="content-block">
          <div class="row">
            <div class="col-12 col-xl-4">
              <span class="category-title" [translate]="'CREATURE.TEMPLATE.KILL_CREDITS'"></span>
              <div class="row">
                @for (i of [1, 2]; track i) {
                  <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                    <label class="control-label" for="KillCredit{{ i }}">KillCredit{{ i }}</label>
                    <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.KILL_CREDITS_DESC' | translate"></i>
                    <input [formControlName]="'KillCredit' + i" id="KillCredit{{ i }}" type="number" class="form-control form-control-sm" />
                  </div>
                }
              </div>
            </div>
            <div class="col-12 col-xl-8">
              <span class="category-title">
                {{ 'CREATURE.TEMPLATE.MODELS' | translate }}
                <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MODEL_ID_TOOLTIP' | translate"></i>
              </span>
              <span>Models will be added in a future Keira3 release in a new editor tab.</span>
            </div>
          </div>
        </div>
        <div class="content-block">
          <div class="row">
            <div class="col-12 col-xl-4">
              <span class="category-title" [translate]="'CREATURE.TEMPLATE.MONEY_LOOT'"></span>
              <div class="row">
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                  <label class="control-label" for="mingold">mingold</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MINGOLD' | translate"></i>
                  <input [formControlName]="'mingold'" id="mingold" type="number" class="form-control form-control-sm" />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3 col-xl-6">
                  <label class="control-label" for="maxgold">maxgold</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MAXGOLD' | translate"></i>
                  <input [formControlName]="'maxgold'" id="maxgold" type="number" class="form-control form-control-sm" />
                </div>
              </div>
            </div>
            <div class="col-12 col-xl-8">
              <span class="category-title" [translate]="'CREATURE.TEMPLATE.TRAINER'"></span>
              <div class="row">
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                  <label class="control-label" for="trainer_type">trainer_type</label>
                  <keira-generic-option-selector
                    [control]="editorService.form.controls.trainer_type"
                    id="trainer_type"
                    [optionList]="TRAINER_TYPE"
                  ></keira-generic-option-selector>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                  <label class="control-label" for="trainer_spell">trainer_spell</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.TRAINER_SPELL_TOOLTIP' | translate"></i>
                  <keira-spell-selector-btn
                    [control]="editorService.form.controls.trainer_spell"
                    [disabled]="editorService.form.controls.trainer_spell.disabled"
                    [config]="{ name: 'trainer_spell' }"
                    [modalClass]="'modal-lg'"
                  />
                  <input [formControlName]="'trainer_spell'" id="trainer_spell" type="number" class="form-control form-control-sm" />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                  <label class="control-label" for="trainer_class">
                    <keira-icon-selector
                      [src]="'assets/img/class/' + editorService.form.controls.trainer_class.value + '.gif'"
                    ></keira-icon-selector>
                    trainer_class</label
                  >
                  <keira-generic-option-selector
                    [control]="editorService.form.controls.trainer_class"
                    id="trainer_class"
                    [optionList]="CREATURE_CLASS"
                  ></keira-generic-option-selector>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-6 col-lg-3">
                  <label class="control-label" for="trainer_race">
                    <keira-icon-selector
                      [src]="
                        'assets/img/race/' + editorService.form.controls.trainer_race.value + '-' + (RACE_ICON_GENDER ? 1 : 0) + '.gif'
                      "
                    ></keira-icon-selector>
                    trainer_race</label
                  >
                  <select
                    [formControlName]="'trainer_race'"
                    id="trainer_race"
                    class="form-control form-control-sm"
                    (change)="RACE_ICON_GENDER = !RACE_ICON_GENDER"
                  >
                    @for (option of CREATURE_RACE; track option) {
                      <option [ngValue]="option.value" [label]="option.value + ' - ' + option.name"></option>
                    }
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-block">
          <div class="row">
            <div class="col-12 col-xl-6">
              <span class="category-title" [translate]="'CREATURE.TEMPLATE.LOOTS'"></span>
              <div class="row">
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="lootid">lootid</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.LOOTID' | translate"></i>
                  <input [formControlName]="'lootid'" id="lootid" type="number" class="form-control form-control-sm" />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="pickpocketloot">pickpocketloot</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.PICKPOCKETLOOT' | translate"></i>
                  <input [formControlName]="'pickpocketloot'" id="pickpocketloot" type="number" class="form-control form-control-sm" />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="skinloot">skinloot</label>
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SKINLOOT' | translate"></i>
                  <input [formControlName]="'skinloot'" id="skinloot" type="number" class="form-control form-control-sm" />
                </div>
              </div>
            </div>
            <div class="col-12 col-xl-6">
              <span class="category-title" [translate]="'CREATURE.TEMPLATE.DIFFICULTY_ENTRIES'"></span>
              <div class="row">
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="difficulty_entry_1">difficulty_entry_1</label>
                  <keira-creature-selector-btn
                    [control]="editorService.form.controls.difficulty_entry_1"
                    [disabled]="editorService.form.controls.difficulty_entry_1.disabled"
                    [config]="{ name: 'difficulty_entry_1' }"
                  />
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.DIFFICULTY_ENTRY_1' | translate"></i>
                  <input
                    [formControlName]="'difficulty_entry_1'"
                    id="difficulty_entry_1"
                    type="number"
                    class="form-control form-control-sm"
                  />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="difficulty_entry_2">difficulty_entry_2</label>
                  <keira-creature-selector-btn
                    [control]="editorService.form.controls.difficulty_entry_2"
                    [disabled]="editorService.form.controls.difficulty_entry_2.disabled"
                    [config]="{ name: 'difficulty_entry_2' }"
                  />
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.DIFFICULTY_ENTRY_2' | translate"></i>
                  <input
                    [formControlName]="'difficulty_entry_2'"
                    id="difficulty_entry_2"
                    type="number"
                    class="form-control form-control-sm"
                  />
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label class="control-label" for="difficulty_entry_3">difficulty_entry_3</label>
                  <keira-creature-selector-btn
                    [control]="editorService.form.controls.difficulty_entry_3"
                    [disabled]="editorService.form.controls.difficulty_entry_3.disabled"
                    [config]="{ name: 'difficulty_entry_3' }"
                  />
                  <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.difficulty_entry_3' | translate"></i>
                  <input
                    [formControlName]="'difficulty_entry_3'"
                    id="difficulty_entry_3"
                    type="number"
                    class="form-control form-control-sm"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-block">
          <span class="category-title" [translate]="'CREATURE.TEMPLATE.DAMAGE'"></span>
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
              <label class="control-label" for="BaseVariance">BaseVariance</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
              <input [formControlName]="'BaseVariance'" id="BaseVariance" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
              <label class="control-label" for="RangeVariance">RangeVariance</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'TODO' | translate"></i>
              <input [formControlName]="'RangeVariance'" id="RangeVariance" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
              <label class="control-label" for="dmgschool">dmgschool</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.dmgschool"
                id="dmgschool"
                [optionList]="DAMAGE_TYPE"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
              <label class="control-label" for="BaseAttackTime">BaseAttackTime</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.BASE_ATTACK_TIME' | translate"></i>
              <input [formControlName]="'BaseAttackTime'" id="BaseAttackTime" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-xl-2">
              <label class="control-label" for="RangeAttackTime">RangeAttackTime</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.RANGE_ATTACK_TIME' | translate"></i>
              <input [formControlName]="'RangeAttackTime'" id="RangeAttackTime" type="number" class="form-control form-control-sm" />
            </div>
          </div>
        </div>
        <div class="content-block">
          <span class="category-title" [translate]="'CREATURE.TEMPLATE.BEHAVIOUR'"></span>
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="AIName">AIName</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.AIName"
                [disabled]="editorService.form.controls.AIName.disabled"
                [config]="{ options: CREATURE_AI_NAME, name: 'AIName' }"
                [modalClass]="'modal-lg'"
              />
              <input [formControlName]="'AIName'" id="AIName" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ScriptName">ScriptName</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SCRIPT_NAME' | translate"></i>
              <input [formControlName]="'ScriptName'" id="ScriptName" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="gossip_menu_id">gossip_menu_id</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.GOSSIP_MENU_ID' | translate"></i>
              <input [formControlName]="'gossip_menu_id'" id="gossip_menu_id" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="MovementType">MovementType</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.MovementType"
                id="MovementType"
                [optionList]="MOVEMENT_TYPE"
              ></keira-generic-option-selector>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="movementId">movementId</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.MOVEMENT_ID' | translate"></i>
              <input [formControlName]="'movementId'" id="movementId" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="HoverHeight">HoverHeight</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.HOVER_HEIGHT' | translate"></i>
              <input [formControlName]="'HoverHeight'" id="HoverHeight" type="number" class="form-control form-control-sm" />
            </div>
          </div>
        </div>
        <div class="content-block">
          <span class="category-title" [translate]="'CREATURE.TEMPLATE.MODIFIERS'"></span>
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="scale">scale</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SCALE' | translate"></i>
              <input [formControlName]="'scale'" id="scale" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="DamageModifier">DamageModifier</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.DAMAGE_MODIFIER' | translate"></i>
              <input [formControlName]="'DamageModifier'" id="DamageModifier" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="HealthModifier">HealthModifier</label>
              <input [formControlName]="'HealthModifier'" id="HealthModifier" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ManaModifier">ManaModifier</label>
              <input [formControlName]="'ManaModifier'" id="ManaModifier" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ArmorModifier">ArmorModifier</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.ARMOR_MODIFIER_TOOLTIP' | translate"></i>
              <input [formControlName]="'ArmorModifier'" id="ArmorModifier" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ExperienceModifier">ExperienceModifier</label>
              <input formControlName="ExperienceModifier" id="ExperienceModifier" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="speed_walk">speed_walk</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SPEED_RUN' | translate"></i>
              <input [formControlName]="'speed_walk'" id="speed_walk" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="speed_run">speed_run</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SPEED_WALK' | translate"></i>
              <input [formControlName]="'speed_run'" id="speed_run" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="speed_run">speed_swim</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SPEED_SWIM' | translate"></i>
              <input [formControlName]="'speed_swim'" id="speed_swim" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="speed_run">speed_flight</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SPEED_FLIGHT' | translate"></i>
              <input [formControlName]="'speed_flight'" id="speed_flight" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="detection_range">detection_range</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.DETECTION_RANGE' | translate"></i>
              <input [formControlName]="'detection_range'" id="detection_range" type="number" class="form-control form-control-sm" />
            </div>
          </div>
        </div>
        <!-- <div class="content-block">
        <span class="category-title">
          {{'CREATURE.TEMPLATE.SPELLS' | translate }} <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE.SPELLS_TOOLTIP' | translate"></i>
        </span>
        <div class="row">
          <div
            *ngFor="let i of [1,2,3,4,5,6,7,8]"
            class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"
            >
            <label class="control-label" for="spell{{ i }}">spell{{ i }}</label>
            <keira-spell-selector-btn
              [control]="editorService.form.controls['spell' + i]"
              [config]="{ name: 'spell' + i }"
              [modalClass]="'modal-lg'"
             />
            <input [formControlName]="'spell' + i" id="spell{{ i }}" type="number" class="form-control form-control-sm">
          </div>
        </div>
      </div> -->
      </form>
      <div class="preview-container" [class.show-preview]="showItemPreview" [class.hide-preview]="!showItemPreview">
        <div class="transparent perfect-scrollbar">
          <!-- TODO: fix and  enable these in the scope of https://github.com/azerothcore/Keira3/issues/3015-->
          <div style="color: white; margin: 10px">
            <p>Preview currently unavailable.</p>
            <p>This feature will be fixed in a new Keira3 version.</p>
          </div>
          <!--          <div class="creature-preview">-->
          <!--            @if (editorService.form.controls.modelid1.value) {-->
          <!--              <keira-model-3d-viewer-->
          <!--                [viewerType]="NPC_VIEWER_TYPE"-->
          <!--                [displayId]="editorService.form.controls.modelid1.value"-->
          <!--                [id]="'model3d_1'"-->
          <!--              >-->
          <!--                <div id="model3d_1"></div>-->
          <!--              </keira-model-3d-viewer>-->
          <!--            }-->
          <!--            @if (editorService.form.controls.modelid2.value) {-->
          <!--              <keira-model-3d-viewer-->
          <!--                [viewerType]="NPC_VIEWER_TYPE"-->
          <!--                [displayId]="editorService.form.controls.modelid2.value"-->
          <!--                [id]="'model3d_2'"-->
          <!--              >-->
          <!--                <div id="model3d_2"></div-->
          <!--              ></keira-model-3d-viewer>-->
          <!--            }-->
          <!--            @if (editorService.form.controls.modelid3.value) {-->
          <!--              <keira-model-3d-viewer-->
          <!--                [viewerType]="NPC_VIEWER_TYPE"-->
          <!--                [displayId]="editorService.form.controls.modelid3.value"-->
          <!--                [id]="'model3d_3'"-->
          <!--              >-->
          <!--                <div id="model3d_3"></div-->
          <!--              ></keira-model-3d-viewer>-->
          <!--            }-->
          <!--            @if (editorService.form.controls.modelid4.value) {-->
          <!--              <keira-model-3d-viewer-->
          <!--                [viewerType]="NPC_VIEWER_TYPE"-->
          <!--                [displayId]="editorService.form.controls.modelid4.value"-->
          <!--                [id]="'model3d_4'"-->
          <!--              >-->
          <!--                <div id="model3d_4"></div-->
          <!--              ></keira-model-3d-viewer>-->
          <!--            }-->
          <!--          </div>-->
        </div>
      </div>
      <button class="btn btn-secondary btn-sm toggle-preview-button" (click)="showItemPreview = !showItemPreview">
        <i class="fas {{ showItemPreview ? 'fa-angle-double-right' : 'fa-angle-double-left' }}"></i>
      </button>
    </div>
  }
</div>
